<template>
    <div class="all">
        <div class="top-item">
            <van-row type="flex" justify="center" class="new2">
                <van-col>募捐资金(元)</van-col>
            </van-row>
            <van-row type="flex" justify="center" class="new3">
                <van-col>261000.00</van-col>
            </van-row>
            <van-row type="flex" justify="center" class="new5">
                <van-col><div class="new4">抗击疫情 专款专用</div></van-col>
            </van-row>
            <van-row type="flex" justify="space-between" class="new6">
                <van-col span="12">
                    <div class="new6_left"  style="border-right: 1px solid #d2e5f5;">
                        <span style="color: #9D9D9D;">支出(元)</span><br>
                        <span style="color: orangered">189730.00</span>
                    </div>
                </van-col>
                <van-col span="12">
                    <div class="new6_left">
                        <span style="color: #9D9D9D;">剩余(元)</span><br>
                        <span style="color: orangered">71270.00</span>
                    </div>
                </van-col>
            </van-row>
            <van-row type="flex" justify="center" class="material-item">
                <van-col span="11" class="material-item-half">
                    <van-row>
                        <van-col span="8">
                            <van-icon name="chat-o" />
                        </van-col>
                        <van-col span="2"></van-col>
                        <van-col span="14">
                            <div class="material-name">酒精(KG)</div>
                            <div class="material-num">1000</div>
                        </van-col>
                    </van-row>
                </van-col>
                <van-col span="2"></van-col>
                <van-col span="11" class="material-item-half">
                    <van-row>
                        <van-col span="8">
                            <van-icon name="chat-o" />
                        </van-col>
                        <van-col span="2"></van-col>
                        <van-col span="14">
                            <div class="material-name">消毒液(箱)</div>
                            <div class="material-num">200</div>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </div>
        <div class="bottom-item">
            <div style="background-color: white; margin-top: 15px;border-radius: 10px">
                <van-tabs>
                    <van-tab title="募捐明细" name="募捐明细">
                        <van-grid :column-num="4">
                            <van-grid-item text="捐赠单位" />
                            <van-grid-item text="捐赠钱物" />
                            <van-grid-item text="捐赠数量" />
                            <van-grid-item text="捐赠时间" />
                        </van-grid>
                        <div v-for="(item,index) in mujuan" :key="index">
                            <van-grid :column-num="4">
                                <van-grid-item :text="item.name" />
                                <van-grid-item :text="item.type" />
                                <van-grid-item :text="item.content" />
                                <van-grid-item :text="item.time" />
                            </van-grid>
                        </div>

<!--                        <div class="div1" v-for="item in data2" :value="item.id" :key="item.id">-->
<!--                            <div class="div1_1">捐赠机构: {{item.mechanism}}</div>-->
<!--                            <div class="div1_1">捐赠内容：{{item.content}}</div>-->
<!--                            <div class="div1_1">捐赠日期：{{item.time}}</div>-->
<!--                        </div>-->
<!--                        <div class="div1">-->
<!--                            <div class="div1_1">捐赠机构: XX有限公司</div>-->
<!--                            <div class="div1_1">捐赠内容：5000只一次性医用口罩</div>-->
<!--                            <div class="div1_1">捐赠日期：02-04</div>-->
<!--                        </div>-->
<!--                        <div class="div1">-->
<!--                            <div class="div1_1">捐赠机构: XX有限公司</div>-->
<!--                            <div class="div1_1">捐赠内容：5000只一次性医用口罩</div>-->
<!--                            <div class="div1_1">捐赠日期：02-04</div>-->
<!--                        </div>-->
                    </van-tab>
                    <van-tab title="使用明细" name="使用明细">
                        <van-grid :column-num="4">
                            <van-grid-item text="捐赠对象" />
                            <van-grid-item text="捐赠物资" />
                            <van-grid-item text="捐赠数量" />
                            <van-grid-item text="捐赠时间" />
                        </van-grid>
                        <div v-for="(item,index) in shiyong" :key="index">
                            <van-grid :column-num="4">
                                <van-grid-item :text="item.name" />
                                <van-grid-item :text="item.content" />
                                <van-grid-item :text="item.num" />
                                <van-grid-item :text="item.time" />
                            </van-grid>
                        </div>
<!--                        <div class="div1" v-for="item in data3" :value="item.id" :key="item.id">-->
<!--                            <div class="div1_1">捐赠对象:{{item.jc_object}} </div>-->
<!--                            <div class="div1_1">捐赠内容：{{item.jc_content}}</div>-->
<!--                            <div class="div1_1">捐赠日期：{{item.jc_time}}</div>-->
<!--                        </div>-->
<!--                        <div class="div1">-->
<!--                            <div class="div1_1">捐赠对象: 王某</div>-->
<!--                            <div class="div1_1">捐赠内容：1000只口罩</div>-->
<!--                            <div class="div1_1">捐赠日期：02-05</div>-->
<!--                        </div>-->
<!--                        <div class="div1">-->
<!--                            <div class="div1_1">捐赠对象: 王某</div>-->
<!--                            <div class="div1_1">捐赠内容：1000只口罩</div>-->
<!--                            <div class="div1_1">捐赠日期：02-05</div>-->
<!--                        </div>-->
                    </van-tab>
                </van-tabs>
            </div>
        </div>
    </div>
</template>

<script>
import { selectfundraising, selectdetailedList, selectdetailsList } from '@/api/city-card/love-help/love-help-index'
export default {
  data () {
    return {
      shiyong: [
        {
          content: '手套',
          num: '-',
          name: '-',
          time: '02-02'
        },
        {
          content: '手续费',
          num: '￥10',
          name: '-',
          time: '02-02'
        },
        {
          content: '口罩',
          num: '-',
          name: '-',
          time: '02-02'
        },
        {
          content: '手续费',
          num: '￥20',
          name: '-',
          time: '02-02'
        },
        {
          content: '额温枪',
          num: '4把',
          name: '-',
          time: '02-02'
        }
      ],
      mujuan: [
        {
          name: '沈阳天雄公司',
          type: '资金',
          content: '￥30000',
          time: '02-01'
        },
        {
          name: '沈阳希艾欧企业管理咨询有限公司(CIO时代学院沈阳分院)',
          type: '资金',
          content: '￥5000',
          time: '02-01'
        },
        {
          name: '浪潮集团',
          type: '资金',
          content: '￥20000',
          time: '02-01'
        },
        {
          name: '易泰电子',
          type: '资金',
          content: '￥20000',
          time: '02-01'
        },
        {
          name: '辽宁立科信息工程有限公司',
          type: '资金',
          content: '￥20000',
          time: '02-01'
        },
        {
          name: '智付慧众(辽宁)网络科技有限公司',
          type: '资金',
          content: '￥10000',
          time: '02-01'
        },
        {
          name: '北京启明星辰信息安全技术有限公司',
          type: '资金',
          content: '￥50000',
          time: '02-01'
        }, {
          name: '辽宁金运旅游集团',
          type: '资金',
          content: '￥50000',
          time: '02-01'
        },
        {
          name: '欣欣晶智',
          content: '一吨东药产医用酒精价值24000元',
          type: '资金',
          time: '02-01'
        },
        {
          name: '沈阳莲盟网络股份有限公司',
          type: '资金',
          content: '200箱84消毒液价值16000元',
          time: '02-01'
        }, {
          name: '市民卡公司',
          type: '资金',
          content: '￥50000',
          time: '02-01'
        },
        {
          name: '荣科科技股份有限公司',
          type: '物资',
          content: '重症隔离监护设备价值150000元，排好分诊导诊设备价值160000元，医用口罩一万个价值25000元，共计335000元。',
          time: '02-01'
        },
        {
          name: '沈阳慧鼎软件科技发展有限公司',
          type: '资金',
          content: '￥50000',
          time: '02-01'
        },
        {
          name: '沈阳经济区旅游产业管理服务集团有限公司',
          content: '￥50000以及200件特质防菌包装苏打水价值36000元。',
          type: '资金物资',
          time: '02-01'
        },
        {
          name: '辽宁春天人力资源服务有限公司',
          type: '资金',
          content: '￥20000',
          time: '02-01'
        },
        {
          name: '新华三集团辽宁代表处',
          type: '资金',
          content: '￥50000',
          time: '02-01'
        },
        {
          name: '橙未来（辽宁）科技集团有限公司',
          type: '物资',
          content: '1000支口罩（已在日本采购，在日本邮局待发货）',
          time: '02-01'
        },
        {
          name: '上海益政网络科技发展有限公司辽宁负责人周俊',
          type: '资金',
          content: '￥10000',
          time: '02-01'
        },
        {
          name: '优易数据',
          type: '资金',
          content: '￥10000',
          time: '02-01'
        },
        {
          name: '沈阳信安盟科技有限公司',
          type: '资金',
          content: '￥50000',
          time: '02-01'
        },
        {
          name: '深信服',
          type: '资金',
          content: '￥30000',
          time: '02-01'
        },
        {
          name: '爱心人士',
          type: '资金',
          content: '￥46000',
          time: '02-01'
        },
        {
          name: '郭京',
          type: '资金',
          content: '￥30000',
          time: '02-01'
        },
        {
          name: '赵敬丹',
          type: '资金',
          content: '￥5000',
          time: '02-01'
        },
        {
          name: '金霞',
          type: '资金',
          content: '￥10000',
          time: '02-01'
        },
        {
          name: '张兆成',
          type: '资金',
          content: '￥10000',
          time: '02-01'
        },
        {
          name: '吴永福',
          type: '资金',
          content: '￥5000',
          time: '02-01'
        },
        {
          name: '李云飞',
          type: '资金',
          content: '￥5000',
          time: '02-01'
        }
      ],
      imgUrl: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1566113039000/1566113221(1).jpg',
      show: false,
      m1: 10,
      m2: 20,
      m3: 50,
      m4: 100,
      m5: 200,
      m6: 500,
      checkde: false,
      checkde1: false,
      data1: {},
      data2: [],
      data3: [],
      money: '0',
      isfund: '',
      paixu1: {},
      paixu2: {},
      paixu3: {},
      a1: [],
      weixin_name: '张三',
      touxiang: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1567408817000/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190902153939.png'
    }
  },
  methods: {

  },
  mounted () {
    selectfundraising({}).then(ret => {
      this.data1 = ret.data.data
    })
    selectdetailedList({}).then(ret => {
      this.data2 = ret.data.data
    })
    selectdetailsList({}).then(ret => {
      this.data3 = ret.data.data
    })
  }
}
</script>

<style scoped>
    .none-item{
        width: 100%;
        text-align: center;
        font-size: 12px;
        padding: 15px 0;
    }
    .material-item-half{
        padding: 10px;
        border: 1px solid #d2e5f5;
        border-radius: 5px;
    }
    .material-num{
        font-size: 14px;
        color: orangered;
        margin-top: 5px;
    }
    .material-name{
        font-size: 12px;
    }
    .material-item{
        padding: 15px 15px 0 15px;
    }
    .all{
        height: 100%;
        padding: 15px;
        background: round;
        background-image: url("https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1567327285000/92d6cfbde8c57238040ca818956509e.png");
    }
    .all >>> .van-tabs__wrap.van-hairline--top-bottom{
        border-radius: 5px;
    }
    .bottom-item{
        width: 100%;
        border-radius: 5px;
    }
    .div8 >>> .van-image__img{
        border-radius: 50px;
    }
    .top-item{
        width: 100%;
        height:auto;
        padding-bottom: 15px;
        background-color: white;
        border-radius: 5px;
    }
    .new2{
        font-size: 12px;
        padding-top: 25px;
    }
    .new3{
        padding-top: 8px;
        font-size: 20px;
        color: orangered;
        font-weight: bold;
    }
    .new4{
        width:120px;
        height: 20px;
        border-radius: 30px ;
        background-color: #F5F5F5;
        text-align: center;
        line-height: 20px;
        font-size: 10px;
        color: #666666;
    }
    .new5{
        padding-top: 8px;
        font-size: 12px;
        color: #848583;
    }
    .new6{
        padding-top: 20px;
    }
    .new6_left{
        text-align: center;
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 8px;
        margin-top: -5px;
    }
    .van-icon{
        padding: 8px;
        border: 1px solid #e4e4e4;
        /*border-radius: 20px;*/
        border-radius: 20px;
        background-color:rgba(153, 204, 51,0.05) ;
    }
    .xinxi{
        font-size: 10px;
        margin-top: 10px;
        line-height: 15px;
    }
    .xia span{
        padding: 5px 45px;
        font-size: 12px;
    }
    .image{
        margin: 10px;
        display: flex;
        justify-content: space-around;
        font-size: 12px;
        text-align: center;
    }
    .div8{
        height: 90px;
        margin: 10px;
        border: #eaeaea 1px solid ;
        border-radius: 10px;
    }
    .div8_img{
        float: right;
        margin: -70px 20px;
        width: 50px;
        height: 50px;
    }
    .div7_1{
        margin:10px 15px;
        font-size: 12px;
        color: gray;
    }
    .div1{
        border: #eaeaea 1px solid;
        margin: 10px;
        height: 85px;
        border-radius: 15px;
    }
    .div1_1{
        font-size: 12px;
        margin: 10px 8px;
        color: gray;
    }
    .div1_2{
        float: right;
        margin: -75px 20px;
        width: 50px;
        height: 50px;
    }
    .group{
        margin: 10px;
        display: flex;
        justify-content: flex-start;
    }
    .desc{
        font-size:12px;
        color: gray;
        letter-spacing: 1px;
    }
    .desc_span{
        font-size:12px;
        color: black;
        letter-spacing: 1px;
    }
    .help-img{
        width: 100px;
    }
    .group-item{
        margin: 10px;
        display: flex;
        justify-content: flex-start;
    }
    .money{
        margin-left: 15px;
    }
    .group-items{
        margin: 10px;
        display: flex;
        justify-content: space-around;
    }
    .group-items div{
        width: 32%;
    }
    .group-items button{
        width: 100%;
    }
    .go{
        color: gray;
        font-size: 12px;
        margin: 10px;
    }
    .go-button{
        width: 100%;
        border-radius: 25px;
    }
    .all >>> .van-grid-item__content::after {
        z-index: 1;
        border-width: 0 0.2rem 0.2rem 0;
    }
</style>
